import React, { Component } from 'react';
import { Map, List } from 'immutable';

export default class App extends Component {
  state = {
    info: Map({
      name: 'zhangsan',
      location: Map({
        provice: '辽宁',
        city: '大连',
        postcode: '123456',
      }),
      favor: List(['读书', '旅游', '运动', '音乐']),
    }),
  };

  render() {
    return (
      <div>
        <h1>App</h1>
        <div>
          <h1>个人信息修改</h1>
          <button
            onClick={() => {
              this.setState({
                info: this.state.info
                  .set('name', 'lisi_' + Math.random())
                  .set(
                    'location',
                    this.state.info
                      .get('location')
                      .set('postcode', '' + Math.random())
                  ),
              });
            }}>
            修改
          </button>
          <div>{this.state.info.get('name')}</div>
          <div>
            {this.state.info.get('location').get('provice')} -
            {this.state.info.get('location').get('city')} -
            {this.state.info.get('location').get('postcode')}
          </div>
          <div>
            <ul>
              {this.state.info.get('favor').map((item, index) => {
                return (
                  <li key={item}>
                    {item}
                    <button
                      onClick={() => {
                        this.setState({
                          info: this.state.info.set(
                            'favor',
                            this.state.info.get('favor').splice(index, 1)
                          ),
                        });
                      }}>
                      del
                    </button>
                  </li>
                );
              })}
            </ul>
          </div>
        </div>
      </div>
    );
  }
}
